<template>
	<view class="">
		<!-- 弹出层 -->
		<uni-popup ref="popup" :mask-click="true" :animation="false">
			<view class="popup_body">
				<view class="popup_top">
					<view class="popup_top_title">扫描仓位码</view>
					<view class="popup_top_close" @click="close()">
						<i class="iconfont icon-shanchu"></i>
					</view>
				</view>
				<view class="popup_content">
					<uni-loading v-if="loading"></uni-loading>
					<!-- 扫描中 -->
					<view class="popup_content_scaning" v-else-if="isWaitScan">
						<input v-model="scanVal" :focus="isFocus" :adjust-position="false" @blur="isFocus=false"
							@confirm="onScanSuccess" placeholder="等待扫码中....."
							placeholder-class="popup_content_scaning_placeholder" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	
	export default {
		name: "task-popup",
		components: {
			
		},
		data() {
			return {
				loading: false,
				isWaitScan: true,
				isFocus: false,
				scanVal: null,
			}
		},
		methods: {

			/**
			 * 打开面板
			 */
			open() {
				// 初始化参数
				this.reset()
				this.scanVal = null
				this.$refs.popup.open('bottom')
				// #ifdef APP-PLUS
				plus.key.addEventListener('keydown', event => {
					self.isFocus = true
				});
				// #endif
				// #ifdef H5
				this.isFocus = true
				// #endif
			},

			/**
			 * 关闭面板
			 */
			close() {
				this.$refs.popup.close()
				this.isFocus = false
			},

			/**
			 * 重新扫码
			 */
			reset() {
				this.isWaitScan = true
				this.loading = false
				this.isFocus = true
			},

			/**
			 * 监听扫码结果
			 * @param e
			 */
			async onScanSuccess(e) {
				if (this.loading) return
				// 提示音
				// this.handleMediaPlayer('success')
				this.$emit('success', this.scanVal)
				this.close()
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../static/css/common";

	.popup_body {
		height: 300px;
		 z-index: 1000; 
	}

	.barnCenter {
		font-size: 22px;
		font-weight: bold;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		text-align: center;
		width: 100%;
	}
</style>
